<template>
    <div class="video-auto-move" @exit="handleExit">
        <background></background>
        <operation>
            <template slot="left">
                <el-tag v-if="init" class="init-text" type="warning" size="small">初始化...</el-tag>
            </template>
            <template slot="right">
                <el-tag v-if="activeOptionName" v-text="activeOptionName" type="success"
                        class="option-tag" size="mini"></el-tag>
                <el-input v-if="option.path" v-model="option.path"
                          class="option-input" size="mini" disabled></el-input>
                <el-button class="setting-btn" type="text" size="small"
                           icon="el-icon-setting" @click="settingClick"></el-button>
            </template>
        </operation>

        <!--table-->
        <el-table class="table" :data="files">
            <el-table-column type="index" width="80" align="center"></el-table-column>
            <el-table-column prop="path" label="路径" align="center"></el-table-column>
            <el-table-column prop="time" label="时间" align="center"></el-table-column>
        </el-table>

        <!--dialog-->
        <template>
            <video-auto-move-option-dialog
                    v-if="dialog.visible"
                    v-model="dialog.visible"
                    :type="dialog.type"
                    @save="handleOptionSave"/>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
  import { R, Key } from "#/r";
  import { fileScan } from "./file-scan";
  import fs from 'fs';

  import Operation from "../../components/common/Operation";
  import Background from "../../components/common/Background";
  import VideoAutoMoveOptionDialog from "../../components/video-auto-move/OptionDialog";

  /**
   * @author 白雨浓
   * @date 2018/9/27 10:35
   *
   * 视频文件自动移动
   **/
  export default {
    name: 'VideoAutoMove',
    components: {VideoAutoMoveOptionDialog, Background, Operation},
    data() {
      return {
        init: true,
        dialog: {
          visible: false,
          type: null
        },
        option: {},
        activeOptionName: '',
        files: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.loadOption();
      });
    },
    methods: {
      loadOption() {
        const options = this.$storage.local.getItem(Key.local.VIDEO_AUTO_MOVE_OPTION);
        const activeOptionName = this.$storage.local.getItem(Key.local.VIDEO_AUTO_MOVE_ACTIVE_NAME);

        if (options && activeOptionName && options[activeOptionName]) {
          this.option = options[activeOptionName];
          this.activeOptionName = activeOptionName;
          this.fileListener();
        } else {
          this.settingClick();
        }
      },
      fileListener() {
        fileScan.watch(this.option,
          () => {
            this.init = false;
          }, (path) => {
            if (this.files.some(file => file.path === path)) {
              return;
            }
            const index = path.lastIndexOf("\\");
            const name = path.slice(index + 1);
            this.copy(path, this.option.target + '\\' + name);

            this.files.push({
              path: path,
              time: this.$date.format(new Date(), 'YYYY-MM-DD HH:mm:ss')
            });
            this.files.forEach(file => this.delete(file.path));
          });
      },
      copy(src, dst) {
        fs.createReadStream(src).pipe(fs.createWriteStream(dst));
      },
      delete(src) {
        fs.unlink(src, err => console.log(err));
      },
      settingClick() {
        this.dialog = {
          visible: true,
          type: R.dialog.EDIT
        }
      },
      handleOptionSave() {
        this.handleExit();
        this.loadOption();
      },
      handleExit() {
        fileScan.close();
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .video-auto-move {
    }

    .init-text {
        margin-left 10px
    }

    .setting-btn {
        color white
    }

    .option-tag {
        margin-right 5px
    }

    .option-input {
        width 200px
        margin-right 10px
    }

    .table {
        width 90%
        margin 30px auto
    }
</style>
